渐进式网页应用

一句话解释：渐进式网页应用（Progressive Web App，简称 PWA）是一种用网页技术（HTML/CSS/JavaScript）构建、但能像原生 App 一样安装到手机桌面、离线打开、接收推送通知的网站形态。

生活化类比

想象你常去一家咖啡店。以前你只能每次到店点单（普通网页：每次都要联网加载）。后来店家给了你一张会员卡（PWA 安装到桌面），卡里存了你的常点菜单，即使店里断网（离线），你也能凭卡快速下单；店里有新品时，还会发短信通知你（推送通知）。这张卡本质还是那家店的（网页技术），但用起来跟"专属 App"没区别——不用去应用商店下载，不占几十 MB 空间，却享受接近原生的体验。

核心概念

PWA 不是某一项单一技术，而是几个能力叠加的结果，业界常归纳为"三大支柱"：

1. Service Worker（服务工作者）：一段运行在浏览器后台的脚本，充当"网络代理"。它能拦截请求、缓存资源，实现离线访问和秒开。这是 PWA 的技术核心。

2. Web App Manifest（应用清单）：一个 JSON 文件，定义应用名称、图标、启动方式、主题色等，让网站可以被"添加到主屏幕"，并以独立窗口全屏运行，去掉浏览器地址栏。

3. HTTPS + 推送通知：PWA 必须运行在 HTTPS 上（安全前提），并可借助 Push API 与 Notification API 发送推送。

可以用一个简化的"体验公式"理解：

**PWA 体验 = 网页的可链接性 + Service Worker 的离线能力 + Manifest 的安装能力 + 推送的召回能力**

判断一个网站是不是合格 PWA，业界常用 Google 的 Lighthouse PWA 审计打分，核心考察：可安装、可离线、HTTPS、响应式、加载性能等。

与相关术语对比

术语	本质	是否需应用商店	能否离线	推送通知	安装体积	典型代表
PWA	增强版网页	否（浏览器直接安装）	支持	支持（iOS 有限制）	极小（KB 级缓存）	Twitter Lite、星巴克
原生 App	平台专属程序	是	支持	支持	大（几十 MB 起）	微信、抖音
普通网页	静态/动态页面	否	不支持	不支持	无	传统企业官网
混合 App（Hybrid）	网页套原生壳	是	部分支持	支持	中等	多数电商 App 内嵌页
小程序	平台内轻应用	是（平台内）	有限	支持	小	微信小程序

关键差异：PWA 的最大优势是"零安装门槛"——用户点一个链接就能用，无需跳转应用商店；最大短板是 iOS 生态支持较晚且受限（如推送需 iOS 16.4+ 且须手动添加到主屏）。

应用场景与数据

PWA 特别适合跨境电商独立站和内容/工具型产品，因为获客链路越短，转化越高。

- 星巴克（Starbucks）：其 PWA 上线后，日活跃用户增长约 2 倍，桌面端订单量接近 iOS 原生 App，而体积仅为原生 App 的 99% 更小（不到 1MB）。

- Twitter Lite：PWA 版本使页面加载速度提升、跳出率下降约 20%，数据用量减少约 70%，在印度等弱网市场显著提升留存。

- 电商通用数据：据 Google 与多家服务商统计，采用 PWA 的电商站点平均加载时间缩短 40%–70%，移动端转化率提升可达 15%–30%。

对独立站卖家而言，典型用法是：用 PWA 做移动端店铺，让老客户把店铺"装"到桌面，通过推送做弃购召回、限时促销，绕开应用商店的高门槛与抽成。

常见误区

- 误区一：PWA 就是"做了个响应式网站"。响应式只是适配屏幕，PWA 的核心是 Service Worker 带来的离线与安装能力，两者不是一回事。

- 误区二：PWA 能完全替代原生 App。在需要调用蓝牙、NFC、复杂后台任务、重度图形等场景，原生仍有优势。

- 误区三：iOS 上 PWA 和安卓体验一致。iOS 对推送、后台、安装入口限制更多，需单独评估。

- 误区四：装了 PWA 就不用管 SEO。PWA 仍是网页，SEO 依然重要，且"可安装"本身能提升回访。

- 误区五：PWA 是免费午餐。缓存策略、版本更新、推送合规（如 GDPR）都需要持续维护。